<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Troy's Gallery | 唐锐</title>
	<meta name="author" content="唐锐 | Troy">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="style/style.css">
</head>
<body>
	<!-- header -->
	<header>
		<h1>Troy's Gallery</h1>
		<p>Thoughts, stories and ideas.</p>
	</header>

	<!-- 导航 -->
	<nav>
		<a href="http://troywith77.github.io" target="_blank">
			<img src="http://publicdomainarchive.com/wp-content/uploads/2014/05/public-domain-images-free-stock-photos-wedding-dress-outdoors-green-grass-wisteria-vines-1000x666.jpg" alt="myPic">
		</a>
		<h1 title="唐锐">Troy</h1>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Art</a></li>
			<li><a href="#">Food</a></li>
		</ul>
		<div id="author">&copy;2015 dezigned by 唐锐</div>
		<div id="nav-btn">MENU</div>
	</nav>

	<!-- 缩略图 -->
	<section id="thumbnail">
		<ul>
			<li>
				<a href="http://7xjr92.com1.z0.glb.clouddn.com/%E8%83%8C%E6%99%AF2015-07-Life-of-Pix-free-stock-photos-mountains-green-landscape-nabeel.jpg" class="img-link">
					<img src="http://7xjr92.com1.z0.glb.clouddn.com/%E8%83%8C%E6%99%AF2015-07-Life-of-Pix-free-stock-photos-mountains-green-landscape-nabeel.jpg" alt="" width="1366" height="768" alt="">
					<h3>Mountain</h3>
				</a>
			</li>

			<li>
				<a href="http://7xjr92.com1.z0.glb.clouddn.com/背景2015-06-Life-of-Pix-free-stock-photos-woman-hair-back-szolkin.jpg" class="img-link">
					<img src="http://7xjr92.com1.z0.glb.clouddn.com/背景2015-06-Life-of-Pix-free-stock-photos-woman-hair-back-szolkin.jpg" alt="" width="1366" height="768" alt="">
					<h3>Girl</h3>
				</a>
			</li>

			<li>
				<a href="http://publicdomainarchive.com/wp-content/uploads/2015/03/public-domain-images-free-stock-photos-1-WTC-architecture-city-1000x667.jpg" class="img-link">
					<img src="http://publicdomainarchive.com/wp-content/uploads/2015/03/public-domain-images-free-stock-photos-1-WTC-architecture-city-1000x667.jpg" alt="" width="1366" height="768" alt="">
					<h3>Tower</h3>
				</a>
			</li>

			<li>
				<a href="http://publicdomainarchive.com/wp-content/uploads/2015/03/public-domain-images-free-stock-photos-alley-ball-bowl-1000x662.jpg" class="img-link">
					<img src="http://publicdomainarchive.com/wp-content/uploads/2015/03/public-domain-images-free-stock-photos-alley-ball-bowl-1000x662.jpg" alt="" width="1366" height="768" alt="">
					<h3>Bowling</h3>
				</a>
			</li>

			<li>
				<a href="http://publicdomainarchive.com/wp-content/uploads/2015/03/public-domain-images-free-stock-photos-bicycle-bike-black-and-white-1000x667.jpeg" class="img-link">
					<img src="http://publicdomainarchive.com/wp-content/uploads/2015/03/public-domain-images-free-stock-photos-bicycle-bike-black-and-white-1000x667.jpeg" alt="" width="1366" height="768" alt="">
					<h3>Bridge</h3>
				</a>
			</li>

			<li>
				<a href="http://publicdomainarchive.com/wp-content/uploads/2015/03/public-domain-images-free-stock-photos-animals-farm-horses-1000x668.jpeg" class="img-link">
					<img src="http://publicdomainarchive.com/wp-content/uploads/2015/03/public-domain-images-free-stock-photos-animals-farm-horses-1000x668.jpeg" alt="" width="1366" height="768" alt="">
					<h3>Horses</h3>
				</a>
			</li>

			<li>
				<a href="http://publicdomainarchive.com/wp-content/uploads/2015/03/public-domain-images-free-stock-photos-apple-iphone-iphone-6-1000x667.jpg" class="img-link">
					<img src="http://publicdomainarchive.com/wp-content/uploads/2015/03/public-domain-images-free-stock-photos-apple-iphone-iphone-6-1000x667.jpg" alt="" width="1366" height="768" alt="">
					<h3>IPhone 6 </h3>
				</a>
			</li>

			<li>
				<a href="http://publicdomainarchive.com/wp-content/uploads/2015/03/public-domain-images-free-stock-photos-apple-fruits-iphone-1000x667.jpg" class="img-link">
					<img src="http://publicdomainarchive.com/wp-content/uploads/2015/03/public-domain-images-free-stock-photos-apple-fruits-iphone-1000x667.jpg" alt="" width="1366" height="768" alt="">
					<h3>IPhone 6</h3>
				</a>
			</li>
			
			<li>
				<a href="http://publicdomainarchive.com/wp-content/uploads/2015/03/public-domain-images-free-stock-photos-autumn-1000x662.jpg" class="img-link">
					<img src="http://publicdomainarchive.com/wp-content/uploads/2015/03/public-domain-images-free-stock-photos-autumn-1000x662.jpg" alt="" width="1366" height="768" alt="">
					<h3>Path</h3>
				</a>
			</li>

			<li>
				<a href="http://publicdomainarchive.com/wp-content/uploads/2015/03/public-domain-images-free-stock-photos-architecture-attraction-italian-1000x580.jpeg" class="img-link">
					<img src="http://publicdomainarchive.com/wp-content/uploads/2015/03/public-domain-images-free-stock-photos-architecture-attraction-italian-1000x580.jpeg" alt="" width="1366" height="768" alt="">
					<h3>Tower</h3>
				</a>
			</li>

			<li>
				<a href="http://publicdomainarchive.com/wp-content/uploads/2015/01/photo-1420828265723-3dbcadd2f65f-1000x667.jpg" class="img-link">
					<img src="http://publicdomainarchive.com/wp-content/uploads/2015/01/photo-1420828265723-3dbcadd2f65f-1000x667.jpg" alt="" width="1366" height="768" alt="">
					<h3>Building</h3>
				</a>
			</li>

			<li>
				<a href="http://publicdomainarchive.com/wp-content/uploads/2014/08/public-domain-images-free-stock-photos-black-white-vintage-suitcase-girl-railroadtracks-walking-1.jpg" class="img-link">
					<img src="http://publicdomainarchive.com/wp-content/uploads/2014/08/public-domain-images-free-stock-photos-black-white-vintage-suitcase-girl-railroadtracks-walking-1.jpg" alt="" width="1366" height="768" alt="">
					<h3>Girl</h3>
				</a>
			</li>

			<li>
				<a href="http://publicdomainarchive.com/wp-content/uploads/2014/05/public-domain-images-free-stock-photos-wedding-dress-outdoors-green-grass-wisteria-vines-1000x666.jpg" class="img-link">
					<img src="http://publicdomainarchive.com/wp-content/uploads/2014/05/public-domain-images-free-stock-photos-wedding-dress-outdoors-green-grass-wisteria-vines-1000x666.jpg" alt="" width="1366" height="768" alt="">
					<h3>Bride</h3>
				</a>
			</li>
		</ul>
	</section>	
		
	<!-- 弹出层 -->
	<section id="gallery">
		<img id="pic" src="" alt="" width="100%" height="100%">
		<a id="close"></a>
		<div id="img-forward"></div>
		<div id="img-backward"></div>
	</section>

	<!-- 电梯 -->
	<footer>
        <div class="do-the-thing">
            <div class="elevator">
                <svg class="sweet-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px">
                    <path d="M70,47.5H30c-1.4,0-2.5,1.1-2.5,2.5v40c0,1.4,1.1,2.5,2.5,2.5h40c1.4,0,2.5-1.1,2.5-2.5V50C72.5,48.6,71.4,47.5,70,47.5z   M47.5,87.5h-5v-25h5V87.5z M57.5,87.5h-5v-25h5V87.5z M67.5,87.5h-5V60c0-1.4-1.1-2.5-2.5-2.5H40c-1.4,0-2.5,1.1-2.5,2.5v27.5h-5  v-35h35V87.5z"/>
                    <path d="M50,42.5c1.4,0,2.5-1.1,2.5-2.5V16l5.7,5.7c0.5,0.5,1.1,0.7,1.8,0.7s1.3-0.2,1.8-0.7c1-1,1-2.6,0-3.5l-10-10  c-1-1-2.6-1-3.5,0l-10,10c-1,1-1,2.6,0,3.5c1,1,2.6,1,3.5,0l5.7-5.7v24C47.5,41.4,48.6,42.5,50,42.5z"/>
                </svg>
                <p>Back to Top</p>
            </div>
        </div>
     </footer>


	<script src="script/jquery-1.11.3.js"></script>
	<script src="script/elevator.min.js"></script>
	<script src="script/main.js"></script>

	<script>                   //返回顶部小电梯的特效
        var elementButton = document.querySelector('.elevator');
        var elevator = new Elevator({
            element: elementButton,
            mainAudio: './music/elevator.mp3', 
            endAudio:  './music/ding.mp3'
        });
	</script>
</body>
</html>